import { Role } from "@/api/interface";
import { customForm } from "@/components/ProForm/interface";
import { customTable } from "@/components/ProTable/interface";
import { ProTableValue } from "@/interface/public";
// 权限菜单
let permissionMenu = ref({
  visible: false,
  roleId: -1
});

export function useDataGrid(proTableBox: ProTableValue, addForm: customForm<Role.ResRoleList>) {
  let dataGrid = reactive<customTable>({
    // 表格配置项
    columns: [
      { prop: "operation", label: "operation", fixed: "left", width: 310 },
      {
        prop: "name",
        label: "name"
      },
      {
        prop: "userNameStr",
        label: "角色人员"
      },

      { prop: "remark", label: "remark" }
    ],
    headButtonList: [
      {
        label: "add",
        type: "primary",
        icon: "el-Plus",
        methods: () => {
          changeFormItemStatus(addForm, ["remark"], false, "hide");
          changeFormItemStatus(addForm, ["userIds"], true, "hide");
          openForm<Role.ResRoleList>(addForm, "NewRole");
        }
      }
    ],
    rowButtonList: [
      {
        label: "edit",
        type: "primary",
        hide: row => row.name !== useUserStore().IDENTITY_ADMIN,
        methods: (row: Role.ResRoleList) => {
          changeFormItemStatus(addForm, ["remark"], false, "hide");
          changeFormItemStatus(addForm, ["userIds"], true, "hide");

          openForm<Role.ResRoleList>(addForm, "editUsers", row);
        },
        attrs: {
          link: true
        }
      },
      {
        label: "editorialStaff",
        type: "primary",
        methods: (row: Role.ResRoleList) => {
          changeFormItemStatus(addForm, ["remark"], true, "hide");
          changeFormItemStatus(addForm, ["userIds"], false, "hide");
          remoteMethod(addForm, "userIds", userPageByStatus, { key: "" }, ["name", "id"]);

          openForm<Role.ResRoleList>(addForm, "editorialStaff", row);

          nextTick(() => {
            const { userIds, id } = row;
            Object.assign(addForm.form, {
              userIds,
              roleId: id
            });
          });
        },
        attrs: {
          link: true
        }
      },
      {
        label: "permissionSetting",
        type: "primary",
        hide: row => row.status === 0 && row.name !== useUserStore().IDENTITY_ADMIN,
        methods: (row: Role.ResRoleList) => {
          Object.assign(permissionMenu.value, {
            roleId: row.id,
            visible: true
          });
        },
        attrs: {
          link: true
        }
      },
      {
        label: "delete",
        type: "danger",
        hide: row => row.status === 0 && row.name !== useUserStore().IDENTITY_ADMIN,
        methods: (row: Role.ResRoleList) => {
          const params = { id: row.id, status: 1 };
          const name = `${transitionLanguages("button", "delete")}【${row.name}】${transitionLanguages("table ", "Role")}`;
          useHandleData(roleRemove, params, name, proTableBox.value?.getTableList);
        },
        attrs: {
          link: true
        }
      }
    ]
  });

  // 对表格返回数据信息处理
  const tableDataCallback = (data: Role.ResRoleList[]) => {
    data.forEach(item => {
      const userList = item.userList || [];
      item.userNameStr = arrJoin2(userList, "name");
      item.userIds = arrJoin3(userList, "id") as Array<number>;
    });
    return data;
  };
  return {
    dataGrid,
    permissionMenu,
    tableDataCallback
  };
}
